<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!-- content -->
<form id="inputForm" class="well form-inline" action="${ctx}/security/roles/save" method="post">
    <input type="hidden" name="id" value="${roles.id}"/>
    <table class="table table-striped table-bordered table-condensed">
        <thead>
        <strong>
            <i class="icon-flag"></i>
            角色表单
        </strong>
        </thead>
        <tr>
            <td class="span2">角色名称:</td>
            <td>
                <input id="name" name="name" type="text" value="${roles.name}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td>类型:</td>
            <td>
                <input id="type" name="type" type="text" value="${roles.type}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td>禁用:</td>
            <td>
                <label class="radio">
                    <input name="enable" type="radio" <c:if test="${!roles.enable}">
                        checked="checked"
                    </c:if> value="0"/>
                    是
                </label>
                <label class="radio">
                    <input name="enable" type="radio" <c:if test="${roles.enable}">
                        checked="checked"
                    </c:if> value="1"/>
                    否
                </label>
            </td>
        </tr>
        <tr>
            <td>权限范围</td>
            <td>
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <td>
                            <i class="icon-user"></i>
                            <span class="tRed">G</span>
                            超级管理员权限
                        </td>
                    </tr>
                    <c:forEach items="${groupResources }" var="group">
                        <tr>
                            <th>
                                    ${group.key.name }
                                <label id="group${group.key.id }" class="checkbox">
                                    <input type="checkbox"/>
                                </label>
                            </th>
                        </tr>
                        <tr for="group${group.key.id }">
                            <td class="tBlue">
                                <c:forEach items="${group.value }" var="resources">
                                    <label class="checkbox">
                                        <input name="resources.id" type="checkbox"
                                        <c:forEach items="${roles.resources }" var="r">
                                        <c:if test="${resources.id == r.id}">
                                               checked="checked"
                                        </c:if>
                                        </c:forEach> value="${resources.id }">
                                            ${resources.name }
                                    </label>
                                </c:forEach>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input class="btn" type="submit" value="提交"/>
                &nbsp;
                <input class="btn" type="button" value="返回" back="back"/>
            </td>
        </tr>
    </table>
</form>
<script>
    $(document).ready(function () {
        //聚焦第一个输入框
        $("#name").focus();
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                name: {
                    required: true,
                    remote: {
                        type: "POST",
                        url: "${ctx}/security/roles/repeat",
                        data: {
                            value: function () {
                                return $.trim($("#name").val());
                            },
                            id: ${roles.id == null ? 0:roles.id},
                            property: "name"
                        }
                    }
                },
                type: {
                    required: true,
                    remote: {
                        type: "POST",
                        url: "${ctx}/security/roles/repeat",
                        data: {
                            value: function () {
                                return $.trim($("#type").val());
                            },
                            id: '${roles.id == null ? 0:roles.id}',
                            property: "type"
                        }
                    }
                }
            },
            messages: {
                name: {
                    remote: $.format("角色名称重复，请重新输入！")
                }, type: {
                    remote: $.format("角色类型重复，请重新输入！")
                }
            }
        });
        //多选框
        $("label[id^='group']").click(function () {
            var _self = $(this);
            var checked = $(":checkbox", _self).attr("checked");
            var id = _self.attr("id");
            var items = $("[for='" + id + "'] :checkbox");
            if (checked) {
                items.attr("checked", "checked");
            } else {
                items.removeAttr("checked");
            }
        });
    });
</script>
